<template>
    <div class="product-wrap">
        <page-wrapper>
            <table-search @search="search(1)" @reset="reset()">
                <template slot="form">
                    <form-item label="">
                        <a-input v-model.trim="form.pdtName" placeholder="产品名称" />
                    </form-item>
                    <!-- <form-item label="">
                        <a-select style="width:200px" v-model.trim="form.type" placeholder="产品类型">
                            <a-select-option v-for="type in typeList" :value="type.innerCategoryId" :key="type.innerCategoryId">
                            {{ type.ctgName }}
                            </a-select-option>
                        </a-select>
                    </form-item> -->
                </template>
                <template slot="extra">
                    <a-button
                        class="filter-item"
                        type="primary"
                        :disabled="hasPerm(['product:list:add'])"
                        icon="plus" @click="show()">新增产品</a-button>
                </template>
            </table-search>
        </page-wrapper>
        <a-spin :spinning="loading">
            <div class="product-list">
                <div class="product_box">
                    <a-row :gutter="16">
                        <a-col class="gutter-row" :xs="24" :sm="12" :md="8" :lg="8" :xl="6" :xxl="4" v-for="(product, index) in list" :key="product.id">
                            <product
                                :info="product"
                                :type-list="typeList"
                                @edit="editProduct(product)"
                                @scan="scanProduct(product)"
                                @update="update(product, index)"
                                @remove="remove(product)"
                                class="product-item"
                            />
                        </a-col>
                    </a-row>
                </div>
                <a-empty v-if="total == 0" description="暂无数据" />
                <div class="pagination_box" v-if="total">
                    <a-pagination
                        :default-current="form.current"
                        :page-size.sync="form.size"
                        size="small"
                        :total="total"
                        @change="pageChange"
                    />
                </div>
            </div>
        </a-spin>
        <template v-if="isShow">
            <show-info :type-list="typeList" :info="productInfo" @cancel="isShow = false" @submit="refreshList" />
        </template>

        <template v-if="showDetail">
            <product-detail :code="productInfo.pdtCode" @cancel="cancelProduct" />
        </template>
    </div>
</template>

<script>
import table from '@/mixins/table';
import Product from './components/product';
import showInfo from './components/show-info';
import ProductDetail from './detail/index';
import ProductTypeApi from '@/api/product/type';
import { remoteList, updateInfo, deleteInfo } from '@/api/product/list';

export default {
    name: 'ProductList',
    mixins: [table],
    components: {
        Product,
        showInfo,
        ProductDetail
    },
    data() {
        let originForm = {
            pdtName: '',
            type: undefined
        };
        return {
            originForm,
            form: {
                ...originForm
            },
            typeList: [],
            isShow: false,
            productInfo: {},
            showDetail: false
        };
    },
    created() {
        this.getAllTypes();
        this.search(1)
    },
    methods: {
        //搜索
        async search(page) {
            try {
                this.loading = true;
                if (page !== '') {
                    this.form.page = page;
                }
                this.list = [];
                let res = await remoteList(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
                this.selectionBox = [];
            } finally {
                this.loading = false;
            }
        },
        //获取所有类别
        async getAllTypes() {
            try {
                let res = await ProductTypeApi.remoteList();
                this.typeList = res.data;
            } finally {
            }
        },
        cancelProduct() {
            this.showDetail = false;
            // this.search();
        },
        //新增 修改产品
        refreshList() {
            this.isShow = false;
            this.productInfo = {};
            this.search(1);
        },
        //编辑产品
        editProduct(item) {
            this.isShow = true;
            this.productInfo = item;
            console.log('.editProduct');
        },
        //查看信息
        scanProduct(item) {
            this.showDetail = true;
            this.productInfo = item;
        },
        //新增产品
        show() {
            this.isShow = true;
            this.productInfo = {};
        },
        //暂停使用
        async update(item, index) {
            try {
                this.loading = true;
                let product = { ...item, status: item.status=='active' ? 'inactive' : 'active' };
                await updateInfo(product);
                this.list.splice(index, 1, product);
            } finally {
                this.loading = false;
            }
        },
        //删除
        async remove(item) {
            try {
                this.loading = true;
                await deleteInfo({ids:[item.id]});
                this.search(1);
            }catch(err){
                // console.log(err)
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.product-wrap {
    .product-list {
        margin: 20px 0;
        .product_box {
            // margin-left: -2%;
            flex-wrap: wrap;
            .product-item {
                // margin-left: 2%;
                // width: 23%;
                width: 100%;
                margin-bottom: 20px;
            }
        }
        .pagination_box {
            text-align: right;
        }
    }
}
</style>
